<template>
    <div class="box">
        <h2>子组件</h2>
        <div>父组件传过来的数据: {{ value }}</div>
        <input type="text" :value="value" @input="inputHandler">
    </div>
</template>

<script>
// <input type="text" :value="value" @input="inputHandler">
// :value是给input框传仅仅展示的数据,当input框中的内容发生变化的时候,并没有双向数据绑定
// input标签有一个input事件,当input框中输入的内容发生变化的时候
// 此时就会触发input事件的回调
export default {
    name: "CustomInput",
    props: ['value'],
    methods: {
        inputHandler(e) {
            console.log("输入的内容", e.target.value);
            this.$emit('input', e.target.value);
        }
    }
}
</script>

<style scoped>

</style>